<script setup>
import store from "../../../store/index.js";
import router from "../../../router/index.js";

const handleBreadCrumbClick = (name) => {
  // 更新面包屑导航信息、更新默认激活菜单名称
  store.commit('sidebar/UPDATE_BREAD_CRUMB_LIST', name);
  // 路由跳转
  router.push({name});
};
</script>

<template>
  <el-breadcrumb separator="/" class="v-bread-crumb">
    <template v-for="(item, index) in store.getters.breadCrumbList || []" :key="index">
      <el-breadcrumb-item>
        <template v-if="item.hasChildren">
          <a @click="handleBreadCrumbClick(item.breadCrumbRouteName)" href="javascript:void(0)">{{ item.title }}</a>
        </template>
        <template v-else>{{ item.title }}</template>
      </el-breadcrumb-item>
    </template>
  </el-breadcrumb>
</template>

<style scoped>
.v-bread-crumb {
  margin-left: 20px;
}
</style>